<template>
  <ChartComp id="centerBottom" :message="overallLine" />
</template>

<script>
export default {
  components: {
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      overallLine: {}
    }
  },
  created() { this.initMessage() },
  mounted() {
  },
  methods: {
    initMessage() {
      this.overallLine = {
        grid: {
          left: '20',
          right: '20',
          top: '15%',
          bottom: '20',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          textStyle: {
            color: '#fff'
          },
          className: 'LineChart-tooltip',
          extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 1px solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
            border-radius: 4px;`
        },
        legend: {
          textStyle: {
            color: '#EAFFF0'
          }
        },
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ],
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true
          },
          splitLine: {
            show: false,
            alignWithLabel: true,

            lineStyle: {
              type: 'dashed',
              color: '#214D87'
            }
          },
          axisLabel: {
            color: '#7CB4FF'
          },
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#214D87'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#214D87'
            }
          },
          axisLabel: {
            color: '#7CB4FF'
          },
          boundaryGap: ['0%', '20%'],
          axisLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#214D87'
            }
          }
        },
        color: ['#0B65D9', '#54C0FF'],
        series: [
          {
            type: 'bar',
            barWidth: '20%',
            name: '科研性质',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            symbol: 'none',
            data: [110, 220, 130, 340, 50, 260, 170, 80, 190, 100, 80, 300],
          },
          {
            type: 'bar',
            barWidth: '20%',
            smooth: true,
            name: '非科研性质',
            emphasis: {
              focus: 'series'
            },
            symbol: 'none',
            data: [160, 80, 20, 10, 40, 70, 180, 280, 90, 200, 110, 120],
          },
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>